<template>
  <div>
    <sub-vue ref="mySub"></sub-vue>
    <div ref="myDiv">{{text}}</div>
  </div>
</template>

<script>
import subVue from '../SPAcomponent/sub'
export default {
  data () {
    return {
      text: '123'
    }
  },
  components: {
    subVue
  },
  methods: {

  },
  // 组件创建后，数据已经完成初始化，但是DOM还未生成
  created () { // 事件的处理函数（created）
    // 该方法获取不到DOM对象
    console.log('created:', this.$refs.myDiv);
  },
  // 数据装载到DOM上后，各种数据已经就位，将数据渲染到DOM上，DOM已经生成
  mounted () {
    // 组件对象
    console.log('mySub:', this.$refs.mySub);
    console.log('mySub:', this.$refs.mySub.$el);
    this.$refs.mySub.$el.innerHTML = 'fdsafadsfafasd';
    console.log('mounted:', this.$refs.myDiv);
    // 涉及到DOM类操作
    // this.$refs.myDiv.innerHTML = '哈哈呵呵';
    // 涉及到数据的操作
    this.text = '嘻嘻呵呵';
  }
}
</script>

<style scoped>
</style>
